<template>
  <div>
    <div class="header" id="header">
      <router-link to="/percen">
        <div class="header_back">
          <div class="header_back_r"></div>
        </div>
      </router-link>
      <div id="head-title">设置</div>
      <router-link to="/" class="gb-head-rightwrap" data-ajax="false">
        <div class="header_right">
          <img
            src=""
          />
        </div>
      </router-link>
    </div>
    <div class="mm"></div>
    <div>
      <div class="setting-box">
        <ul>
          <router-link to="/people">
            <li>
              个人资料
              <div></div>
            </li>
          </router-link>
          <router-link to="/zhanghao">
            <li>
              手机号码
              <div></div>
            </li>
          </router-link>
          <router-link to="/xiugai">
            <li>
              修改密码
              <div></div>
            </li>
          </router-link>
          <li>
            <van-cell title="绑定社交账号" @click="showShare = true" />
            <van-share-sheet
              v-model="showShare"
              title="绑定社交账号/分享"
              :options="options"
              @select="onSelect"
            />
          </li>

          <a
            href="/help/default/complaint?flag=0"
            style="margin-top: 10px; display: block"
          >
            <li>
              意见反馈
              <div></div>
            </li>
          </a>
          <a href="/help-472-348.html?flag=0">
            <li>
              关于淘手游
              <div></div>
            </li>
          </a>
        </ul>
        <div class="gb-logout" id="js-gb-logout" @click="hand">
          <div>退出登录</div>
        </div>
      </div>
      <input
        type="hidden"
        value="https://passport.taoshouyou.com"
        id="comurl"
      />
      <div id="popMessage" class="pop" on="on">
        <div class="pop-val"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    hand(){
      this.$store.commit("percen/gai",false)
      this.$router.push("/percen")
    }
  },
};
</script>
<style src="../../assets/css/set.css" scoped></style>
<style lang="less" scoped>
.mm{
  height: 50px;
  widows: 100%;
}
.gb-logout div {
  background: #ff0140;
  text-align: center;
  color: #fff;
  height: 0.5rem;
  line-height: 0.5rem;
  margin: 20px 14px;
  border-radius: 4px;
  letter-spacing: 2px;
  font-size: 0.2rem;
}
.setting-box ul a li {
  border-bottom: 1px solid #f7f7f7;
  padding: 0.12rem 3%;
  background-position: right;
  background-origin: content-box;
  background-size: 0.6rem;
  background: #fff;
  padding-right: 0.1rem;
}
</style>